<template>
  <div class="chart-wrapper">
    <div :id="'chart'+v.name" class="chart-item" v-for="(v,i) in chartData" :key="i"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "chartsList",
  data() {
    return {
      chartData: [
        { name: "radar", data: [] },
        { name: "pie", data: [] },
        { name: "dar", data: [] }
      ]
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.initChart();
    })
  },
  methods: {
    initChart() {
      this.chartData.forEach(v => {
        v.option = this.setOption(v.name);
        v.mychart = echarts.init(document.getElementById("chart" + v.name));
        v.mychart.setOption(v.option);
      });
    },
    setOption(type) {     
      var radarOption = {
        // color:['#ccc','skyblue','blue'],
        tooltip: {},
        legend: {
          bottom: 30,
          data: ["Allocated Budget", "Actual Spending", "Expected Spending"]
        },
        radar: {
          // shape: 'circle',
          radius: 100,
          name: {
            textStyle: {
              color: "#999" // borderRadius: 3,
              // padding: [3, 5]
            },
             formatter(value) {
                  let list = value.split(",");
                  return list[0]+'\n'+list[1]
//                   let result="";
//                   for(let i=1;i<=list.length;i++) {
//                     if(!(i%4)&&list[i]!=undefined) {
//                       result += list[i-1]+'\n';
//                     }else {
//                       result += list[i-1];
//                     }
//                   }
//                   return result;
                },
          },
          splitLine: {
            lineStyle: {
              //   color:'yellow'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: "rgba(0,0,0,.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          indicator: [
            {
              name: "销售,sales",
              max: 6500
            },
            {
              name: "管理,Administration",
              max: 16000
            },
            {
              name: "信息技术,Information Techology",
              max: 30000
            },
            {
              name: "客服,Customer Support",
              max: 38000
            },
            {
              name: "研发,Development",
              max: 52000
            },
            {
              name: "市场,Marketing）",
              max: 25000
            }
          ]
        },
        series: [
          {
            // name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1 //为零时为线型
              }
            },
            itemStyle: {
              emphasis: {
                color: "red",
                opacity: 0.7,
                lineStyle: {}
              }
            },
            data: [
              {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: "Allocated Budget"
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: "Actual Spending"
              },
              {
                value: [3000, 6000, 15000, 19000, 13000, 11000],
                name: "Expected Spending"
              }
            ],
            animationDuration: 3000
          }
        ]
      };
      var pieOption = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        left: 'center',
        top: 'bottom',
        data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
                show: true,
                type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [10, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
            ]
        }
    ]
};
var barOption = {
    color:['skyblue','yellow','green'],
    legend:{
        bottom:10,
        data:['bar','bar1','bar2']
    },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        name:'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        stack: 'one'
    },
            {
                        name:'bar1',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        stack: 'one'
    },
            {
                        name:'bar2',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        stack: 'one'
    },
    ]
};
if(type=='radar'){
  return radarOption
}else if(type=='pie'){
  return pieOption
}else{
  return barOption
}
    }
  }
};
</script>
<style lang="less" scoped>
.chart-wrapper {
  display: flex;
  .chart-item {
    flex: 1;
    width: 0;
    background: #fff;
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
